<template>
  <div v-show="!flag">
    <p class="warn">
      {{$t('channelsettings.tip2')}}
    </p>
    <div class="btn-group">
      <el-button class="primary_btn" @click.stop="applyOrMyselfToConfig('apply')">{{$t('channelsettings.ApplicationConfiguration')}}</el-button>
      <el-button type="primary" class="primary_btn" @click.stop="applyOrMyselfToConfig('myself')">{{$t('channelsettings.tip4')}}</el-button>
    </div>
    <div v-show="configMySelf" class="margin">
      <affix :label="$t('channelsettings.SignTheAgreementDisclaimerGgreement')"></affix>
      <p class="declare">{{$t('channelsettings.tip5')}}</p>
      <p>{{$t('channelsettings.tip3')}}</p>
      <el-form :model="mySelfForm" :rules="rules1" ref="mySelfForm" label-width="130px" label-position="top" class="myself-form" style="display:none;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('channelsettings.tip9')" prop="username">
              <el-input size="mini"  v-model.trim="mySelfForm.username" auto-complete="off" @keyup.native.enter="agreeToConfig"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <input type="password" style="display:none;width:0;height:0;">
            <!--<input type="password" data-placeholder="请输入密码" id="config_ucenter_password" data-required="true" autocomplete=""  tabindex="2" spellcheck="false" name="password"/>-->
            <el-form-item :label="$t('channelsettings.tip10')" prop="password">
              <el-input size="mini" type="password" v-model="mySelfForm.password"   auto-complete="new-password" @keyup.native.enter="agreeToConfig"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btn-group">
        <el-button class="primary_btn" @click.stop="hideApplyOrMyself">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" class="primary_btn" @click.stop="agreeToConfig">{{$t('channelsettings.tip6')}}</el-button>
      </div>
    </div>
    <div v-if="configApply" class="margin applt-to-config">
      <affix :label="$t('channelsettings.tip7')"></affix>
      <el-row :gutter="20">
        <el-col :span="8" :class="isclearfix?'clearfix':''">
          <b-input v-on:tellme="submit" :label="$t('business.linker')" :default="''" :id="$t('business.linker')" require="required" :random="random"></b-input>
        </el-col>
        <el-col :span="8" :class="isclearfix?'clearfix':''">
          <b-input v-on:tellme="submit" :label="$t('business.linkerPhone')" :default="''" :id="$t('business.linkerPhone')" require="required" :random="random"></b-input>
        </el-col>
        <el-col :span="8">
          <b-input v-on:tellme="submit" :label="$t('public.email')" :default="''" :id="$t('public.email')" require="no" :random="random"></b-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <b-file v-on:tellme="submit" :label="$t('channelsettings.tip11')" :id="$t('channelsettings.tip11')" require="no" :random="random" :default="[]" @showBigImg="showBigImg"></b-file>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <b-textarea v-on:tellme="submit" :label="$t('public.remark')" :default="''" :id="$t('public.remark')" require="no" :random="random"></b-textarea>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="btn-group">
            <el-button class="primary_btn" @click.stop="hideApplyOrMyself">{{$t('public.cancel')}}</el-button>
            <el-button type="primary" class="primary_btn" @click.stop="submitApply">{{$t('business.submit')}}</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-show="applySuccess">
      <affix :label="$t('channelsettings.tip7')"></affix>
      <i class="iconfont icon-tijiaochenggong"></i>
      <p>{{$t('channelsettings.tip8')}}</p>
    </div>
  </div>
</template>
<script>
  import Affix from '../../../../ui-modules/affix/Affix.vue'
  import BInput from '@/components/public-modules/cust-tab-content/business/base/Binput.vue'
  import BTextarea from '@/components/public-modules/cust-tab-content/business/base/Btextarea.vue'
  import BFile from '@/components/public-modules/cust-tab-content/business/base/Bfile.vue'
  import { commitImgType2 } from '@/utils/publicMethod.js'
//  let md5 = require('md5')
  export default {
    name: 'ApplyToConfig',
    data () {
      return {
        flag: false, // true：通话配置界面，false: 申请界面
        configMySelf: false, // true: 自己配置，输入账号密码界面 false: 隐藏
        configApply: false, // true: 提交申请工单， false: 隐藏
        applySuccess: false, // true: 提交申请工单， false: 隐藏
        mySelfForm: {
          username: '',
          password: ''
        },
        rules1: {
          username: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        },
        random: 0,
        submitNum: 0,
        form: {
          accountName: this.$store.state.session.account.name,
          companyName: '',
          accountId: this.$store.state.session.account.account,
          fields: [],
          type: 'call'
        }
      }
    },
    props: {
      isclearfix: {type: Boolean, default: false}
    },
    components: {
      Affix,
      BInput,
      BTextarea,
      BFile
    },
    methods: {
      showBigImg (data) {
        // 获取所有包含imgA的图片
        let _array = this.$el.querySelectorAll('.applt-to-config .imgA')
        commitImgType2(data, _array)
      },
      applyOrMyselfToConfig (flag) {
        if (flag === 'apply') {
          this.configApply = true
          this.configMySelf = false
        } else if (flag === 'myself') {
          this.configApply = false
          this.configMySelf = true
        }
        this.applySuccess = false
      },
      hideApplyOrMyself () {
        this.configApply = false
        this.configMySelf = false
      },
      submit (obj) {
        let name = Object.keys(obj)[0]
        let value = obj[name]
        if (value === false) {
          return
        }
        this.submitNum++
        this.form.fields.push({name, value})
        this.form.companyName = this.$store.state.session.account.companyName || ''
        if (this.submitNum === 5) {
          this.form.fields.push({name: '账户名称', value: this.form.accountName}) // 功能配置的字段，不能做国际化
          this.form.fields.push({name: '公司名称', value: this.$store.state.session.account.companyName})
          this.$store.dispatch('submitBusinessFlowApply', this.form).then((res) => {
            if (res.success) {
              this.configApply = false
              this.configMySelf = false
              this.applySuccess = true
            }
          })
        }
      },
      submitApply () {
        this.random = Math.random()
        this.submitNum = 0
        this.form.fields = []
      },
      agreeToConfig () {
        this.$store.commit('IS_NORMAL_CALL_CONFIG', true)
        window.sessionStorage.setItem('ucenterLoginFlag', 'yes')
        this.$emit('loginSuccess', true)
//        this.$refs.mySelfForm.validate((valid) => {
//          if (valid) {
//            if (!this.mySelfForm.password.trim()) {
//              this.$message.error('请输入正确密码！')
//              this.mySelfForm.password = ''
//              return
//            }
//            this.mySelfForm.password = md5(this.mySelfForm.password)
//            this.$store.dispatch('ivrOperationVerify', this.mySelfForm).then(resp => {
//              if (resp && resp.success) {
//                this.flag = true
//                this.$store.commit('IS_NORMAL_CALL_CONFIG', true)
//                window.sessionStorage.setItem('ucenterLoginFlag', 'yes')
//                this.$emit('loginSuccess', true)
//              } else {
//                this.flag = false
//                this.mySelfForm.password = ''
//                window.sessionStorage.setItem('ucenterLoginFlag', 'no')
//                this.$store.commit('IS_NORMAL_CALL_CONFIG', false)
//                this.$emit('loginSuccess', false)
//              }
//            })
//          }
//        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
    .margin
      margin-bottom 60px
    .btn-group
      margin 20px auto 30px
      text-align center
    .myself-form
      width 600px
      margin 0 auto
    .apply-form
      width 80%
      .btn-group
        float right
    .warn
      color $c-prompt
      padding-bottom 20px
    .declare
      text-align center
      font-size 18px
      font-weight bold
      margin-bottom 30px
      +p
        line-height 2
        margin-bottom 30px
    .icon-tijiaochenggong
      margin 0 auto
      color $c-main
      width 50px
      display block
      font-size 50px
      +p
        text-align center
        margin-top 14px
  .clearfix:after
    clear both
</style>




















